<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      th, td {
        border: 1px solid black;
        padding: 8px;
        text-align: left;
      }
      th {
        background-color: #f2f2f2;
      }
      .header {
        margin-bottom: 20px;
      }
    </style>
    <script>
      function addScrum() {
        var scrumRow = document.querySelector('.scrum-row');
        scrumRow.style.display = scrumRow.style.display === 'none' ? 'table-row' : 'none';
      }
      function getCurrentTime() {
        var now = new Date();
        var year = now.getFullYear();
        var month = (now.getMonth() + 1).toString().padStart(2, '0');
        var day = now.getDate().toString().padStart(2, '0');
        var hours = now.getHours().toString().padStart(2, '0');
        var minutes = now.getMinutes().toString().padStart(2, '0');
        var seconds = now.getSeconds().toString().padStart(2, '0');
        var formattedTime = year + '-' + month + '-' + day + ' ' + hours + ':' + minutes + ':' + seconds;
        return formattedTime;
      }
      function displayScrumStatusOptions(selectElement) {
        var currentSelectedValue = selectElement.value;
        while (selectElement.options.length > 0) {
          selectElement.remove(0);
        }
        var option1 = document.createElement("option");
        option1.value = "待分配";
        option1.text = "待分配";
        selectElement.add(option1);
        var option2 = document.createElement("option");
        option2.value = "进行中";
        option2.text = "进行中";
        selectElement.add(option2);
        var option3 = document.createElement("option");
        option3.value = "已完成";
        option3.text = "已完成";
        selectElement.add(option3);
        if (currentSelectedValue) {
          for (var i = 0; i < selectElement.options.length; i++) {
            if (selectElement.options[i].value === currentSelectedValue) {
              selectElement.selectedIndex = i;
              break;
            }
          }
        }
      }
      function sendGetRequest(url) {
        fetch(url, {
          method: 'GET',
        }).catch(error => {
          console.error('There has been a problem with your fetch operation:', error);
        });
      }
      function onScrumStatusChange(selectElement) {
        var selectedValue = selectElement.value;
        var scrumId = selectElement.getAttribute('data-id');
        var url = '/scrum/status/edit/' + selectedValue + '/' + scrumId;
        sendGetRequest(url);
      }
      function displayScrumAllocateUserOptions(selectElement) {
        fetch("/user/listall", {
          method: 'GET',
        }).then(response => {
          return response.json()
        }).then(data => {
          var currentSelectedValue = selectElement.value;
          while (selectElement.options.length > 0) {
            selectElement.remove(0);
          }
          var userList = data.user_list
          userList.forEach(function (user) {
            var option = document.createElement("option")
            option.value = user
            option.text = user
            selectElement.add(option)
          })
          if (currentSelectedValue) {
            for (var i = 0; i < selectElement.options.length; i++) {
              if (selectElement.options[i].value === currentSelectedValue) {
                selectElement.selectedIndex = i;
                break;
              }
            }
          }
        }).catch(error => {
          console.error(error)
        })
      }
      function onScrumAllocateUserChange(selectElement) {
        var selectedValue = selectElement.value;
        var scrumId = selectElement.getAttribute('data-id');
        var url = '/scrum/allocate_user/edit/' + selectedValue + '/' + scrumId
        sendGetRequest(url)
      }
    </script>
</head>
<body>
  <div class="header">
    <h1>Scrum 冲刺</h1>
    <button><a href="/">返回</a></button>
    <button id="createScrum" onclick="addScrum()">创建需求</button>
  </div>
  <div class="content">
    <div id="todo">
      <table>
        <thead>
          <tr>
            <th>创建时间</th>
            <th>需求</th>
            <th>创建用户</th>
            <th>分配用户</th>
            <th>截止时间</th>
            <th>状态</th>
            <th>操作</th>
          </tr>
        </thead>
        <tbody>
        {{ range .scrum_list }}
          <tr>
            <td>{{ .CreateTime }}</td>
            <td>{{ .ScrumDetail }}</td>
            <td>{{ .ScrumUser }}</td>
            <td>
              <select
                      name="scrum_allocate_user"
                      id="scrumAllocateUserSelect-{{ .ScrumId }}"
                      class="scrumAllocateUserSelect"
                      data-id="{{ .ScrumId }}"
                      onclick="displayScrumAllocateUserOptions(this)"
                      onchange="onScrumAllocateUserChange(this)">
                <option value="{{ .AllocateUser }}">{{ .AllocateUser }}</option>
              </select>
            </td>
            <td>{{ .ExpirationDatetime }}</td>
            <td>
              <select
                      name="scrum_status"
                      id="scrumStatusSelect-{{ .ScrumId }}"
                      class="scrumStatusSelect"
                      data-id="{{ .ScrumId }}"
                      onclick="displayScrumStatusOptions(this)"
                      onchange="onScrumStatusChange(this)">
                <option value="{{ .ScrumStatus }}">{{ .ScrumStatus }}</option>
              </select>
            </td>
            <td>
              <button><a href="/scrum/edit/{{ .ScrumId }}">edit</a></button>
              <button><a href="/scrum/delete/{{ .ScrumId }}">delete</a></button>
            </td>
          </tr>
        {{ end }}
          <tr class="scrum-row" style="display: none;">
            <form action="/scrum/add" method="post">
              <td width="80px" class="timestamp">2024-4-1 17:20:23</td>
              <td>
                <textarea name="scrum_detail" id="scrum_detail" cols="60" rows="10"></textarea>
              </td>
              <td>
                {{ .scrum_user }}
              </td>
              <td>
                <select name="allocate_user" id="allocate_user">
                  {{ range .allocate_user }}
                  <option value="{{ . }}">{{ . }}</option>
                  {{ end }}
                </select>
              </td>
              <td>
                <input type="text" name="expiration_datetime">
              </td>
              <td>
                <select name="scrum_status" id="scrum_status">
                  <option value="待分配">待分配</option>
                  <option value="进行中">进行中</option>
                  <option value="已完成">已完成</option>
                </select>
                <button type="submit">确认</button>
              </td>
            </form>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
  <script>
    document.querySelector(".timestamp").innerHTML = getCurrentTime()
  </script>
</body>
</html>